<template>
  <view class="timer-container">
    <!-- 单次计时器按钮 -->
    <button class="btn single" @click="handleSingleTimer">单次计时器</button>
    <!-- 启动传参计时器按钮 -->
    <button class="btn param" @click="handleParamTimer">启动传参计时器</button>
    <!-- 取消计时器按钮 -->
    <button class="btn cancel" @click="handleCancelTimer">取消计时器</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      timer: null // 存储定时器 ID，用于后续取消
    }
  },
  methods: {
    // 单次计时器（类似 setTimeout，只执行一次）
    handleSingleTimer() {
      setTimeout(() => {
        uni.showToast({
          title: '单次计时器触发啦～',
          icon: 'none'
        })
      }, 3000) // 3 秒后执行
    },

    // 启动传参计时器（类似 setInterval，循环执行并传参）
    handleParamTimer() {
      const customParam = '我是传递的参数～'; // 自定义要传递的参数
      this.timer = setInterval((param) => {
        uni.showToast({
          title: `传参计时器触发，参数：${param}`,
          icon: 'none'
        })
      }, 2000, customParam) // 每 2 秒执行，传递 customParam
    },

    // 取消计时器
    handleCancelTimer() {
      if (this.timer) {
        clearInterval(this.timer); // 清除定时器
        this.timer = null; // 置空，避免重复清除
        uni.showToast({
          title: '定时器已取消',
          icon: 'none'
        })
      } else {
        uni.showToast({
          title: '暂无运行中的定时器',
          icon: 'none'
        })
      }
    }
  }
}
</script>

<style scoped>
.timer-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx;
  gap: 30rpx; /* 按钮之间的间距 */
}

.btn {
  width: 90%;
  height: 100rpx;
  border-radius: 8rpx;
  font-size: 36rpx;
}

.single {
  background-color: #007AFF;
  color: #fff;
}

.param {
  border: 1px solid #007AFF;
  color: #007AFF;
  background-color: #fff;
}

.cancel {
  background-color: #FF3B30;
  color: #fff;
}
</style>